import NavBar from "@/components/menus/NavBar";
import { View } from "@tarojs/components";
import {
  Arrow,
  ArrowLeft,
  GoodJobOutlined,
  ShareOutlined,
} from "@taroify/icons";
import Taro from "@tarojs/taro";
import { Divider, Image } from "@taroify/core";
import UserTag from "@/components/user/UserTag";
import { RenderMultilineText } from "@/utils/render";
import { strToArray } from "@/utils";
import SendTools from "@/components/common/SendTools";
import Share from "@/components/common/Share";
import { useState } from "react";
import OrderMenu from "@/components/menus/OrderMenu";
import ArticleComment from "@/components/article/ArticleComment";

export default () => {
  const user = {
    avatar: "http://127.0.0.1:9999/statics/admin.jpg",
    username: "瑶瑶混日子",
    kid: "1864273892504383489",
    email: "3034221968@qq.com",
    phone: "17508561337",
    address: "局域网",
    sex: "2",
    ipAddr: "192.168.1.11",
    blackGround: "http://localhost:9999/statics/background/back.jpg",
    password: "1d9751757881f4c3fd1f840eccc532d4",
  };
  const test = {
    kid: "1",
    context: "笑死我了。\n不是，这是什么鬼",
    title: "一个研究生能闯多大的祸",
    createTime: "2024-10-10",
    contextUrl:
      "http://localhost:9999/statics/touste.jpg,http://localhost:9999/statics/video.jpg",
  };
  const [show, setShow] = useState(false);
  const [menu, setMenu] = useState(0);
  function changeOrder(index: number) {
    console.log(index);
  }
  return (
    <NavBar
      left={
        <View className="flex gap-2 items-center">
          <ArrowLeft onClick={() => Taro.navigateBack()} size={24} />
          <View className="bg-[#F1F4FD] flex gap-1 items-center  py-1 px-2 rounded-full">
            <Image
              width={40}
              height={40}
              src="http://127.0.0.1:9999/statics/admin.jpg"
            />
            <View className="max-w-40 truncate text-[22px]">新孙笑川吧</View>
            <Arrow color="#ACAEBB" />
          </View>
        </View>
      }
    >
      <View className="p-2 pb-16">
        <UserTag size="medium" data={user} right=" " info />
        <View className="mt-2">
          <View className="text-xl  font-semibold mb-3">{test.title}</View>
          <View className="my-2">{RenderMultilineText(test.context)}</View>
          <View>
            {strToArray(test.contextUrl).map((item, i) => {
              return (
                <Image key={i} mode="widthFix" className="w-full" src={item} />
              );
            })}
          </View>
        </View>
        <UserTag size="medium" bgc="#F7F7F9" data={user} right=" " />
        <View className="mt-2 flex justify-around items-center">
          <View className="flex items-center gap-1 flex-col justify-center">
            <GoodJobOutlined size={30} />3
          </View>
          <View
            onClick={() => setShow(true)}
            className="flex items-center gap-1 flex-col justify-center"
          >
            <ShareOutlined size={30} />
            分享
            <Share show={show} change={setShow} />
          </View>
        </View>
        <Divider />
        <OrderMenu changeMenu={setMenu} changeOrder={changeOrder} />
        <View>
          <ArticleComment />
        </View>
      </View>
      <SendTools type="comment" />
    </NavBar>
  );
};
